<template>
  <a-modal
    class="import-result"
    title="导入结果"
    v-model="show"
    :centered="true"
    :footer="null"
    :maskClosable="false"
    :width=1000
    @cancel="handleCancel">
    <div class="import-desc">
      <span v-if="importData.length === 0 && errors.length === 0">
        <a-alert
          message="暂无导入记录"
          type="info">
        </a-alert>
      </span>
      <span v-if="importData.length !== 0 && errors.length !== 0">
        <a-alert
          message="部分导入成功"
          type="warning">
          <div slot="description">
            成功导入 <a>{{importData.length}}</a> 条记录，<a>{{errors.length}}</a> 条记录导入失败，共耗时 <a>{{times}}</a> 秒
          </div>
        </a-alert>
      </span>
      <span v-if="importData.length !== 0 && errors.length === 0">
        <a-alert
          message="全部导入成功"
          type="success">
          <div slot="description">
            成功导入 <a>{{importData.length}}</a> 条记录，共耗时 <a>{{times}}</a> 秒
          </div>
        </a-alert>
      </span>
      <span v-if="importData.length === 0 && errors.length !== 0">
        <a-alert
          message="全部导入失败"
          type="error">
          <div slot="description">
            <a>{{errors.length}}</a> 条记录导入失败，共耗时  <a>{{times}}</a> 秒
          </div>
        </a-alert>
      </span>
    </div>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="成功记录" key="1" v-if="importData.length">
        <a-table ref="successTable"
                 :columns="successColumns"
                 :dataSource="importData"
                 :pagination="pagination"
                 :scroll="{ x: 3600 }">
        </a-table>
      </a-tab-pane>
      <a-tab-pane tab="失败记录" key="2" v-if="errors.length">
        <a-table ref="errorTable"
                 :columns="errorColumns"
                 :dataSource="errorsData"
                 :pagination="pagination"
                 :scroll="{ x: 952 }">
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
  export default {
    props: {
      importResultVisible: {
        required: true,
        default: false
      },
      importData: {
        required: true
      },
      errors: {
        required: true
      },
      times: {
        required: true
      }
    },
    data() {
      return {
        pagination: {
          pageSizeOptions: ['5', '10'],
          defaultCurrent: 1,
          defaultPageSize: 5,
          showQuickJumper: true,
          showSizeChanger: true,
          showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
        }
      }
    },
    computed: {
      errorsData() {
        let arr = []
        for (let i = 0; i < this.errors.length; i++) {
          let error = this.errors[i]
          let e = {}
          for (let field of error.errorFields) {
            e = {...field}
            e.row = error.row
            arr.push(e)
          }
        }
        return arr
      },
      successColumns() {
        let {sortedInfo} = this
        sortedInfo = sortedInfo || {}
        let {filteredInfo} = this
        filteredInfo = filteredInfo || {}
        return [{
          title: '设备编号',
          dataIndex: 'deviceNo',
          scopedSlots: {customRender: 'deviceNo'},
        }, {
          title: '设备类型',
          dataIndex: 'deviceType',
          customRender: (text, row, index) => {
            switch (text) {
              case '1':
                return <a-tag color = "pink" > 终端机具 < /a-tag>
              case '2':
                return <a-tag color = "pink" > 终端部件 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '终端机具', value: '1'},
            {text: '终端部件', value: '2'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.deviceType || null,
          onFilter: (value, record) => record.deviceType.includes(value)
        }, {
          title: '设备描述',
          dataIndex: 'deviceDesc',
          scopedSlots: {customRender: 'deviceDesc'},
        }, {
          title: '入库批次号',
          dataIndex: 'libraryBatch',
          scopedSlots: {customRender: 'libraryBatch'},
        }, {
          title: '终端厂商',
          dataIndex: 'brandName',
          scopedSlots: {customRender: 'brandName'},
        }, {
          title: '终端型号',
          dataIndex: 'modelName',
          scopedSlots: {customRender: 'modelName'},
        }, {
          title: 'S/N号',
          dataIndex: 'sn',
          scopedSlots: {customRender: 'sn'},
        }, {
          title: '有效期开始日期',
          dataIndex: 'startDate',
          scopedSlots: {customRender: 'startDate'},
        }, {
          title: '有效期截止日期',
          dataIndex: 'endDate',
          scopedSlots: {customRender: 'endDate'},
        }, {
          title: '设备购置方式',
          dataIndex: 'devicePurchType',
          customRender: (text, row, index) => {
            switch (text) {
              case '00':
                return <a-tag color = "pink" > 自有 < /a-tag>
              case '01':
                return <a-tag color = "pink" > 租用 < /a-tag>
              case '02':
                return <a-tag color = "pink" > 第三方所有 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '自有', value: '00'},
            {text: '租用', value: '01'},
            {text: '第三方所有', value: '02'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.devicePurchType || null,
          onFilter: (value, record) => record.devicePurchType.includes(value)
        }, {
          title: '设备单价(元)',
          dataIndex: 'devicePrice',
          scopedSlots: {customRender: 'devicePrice'},
        }, {
          title: '设备状态',
          dataIndex: 'status',
          customRender: (text, row, index) => {
            switch (text) {
              case '10':
                return <a-tag color = "pink" > 未使用 < /a-tag>
              case '11':
                return <a-tag color = "pink" > 已使用 < /a-tag>
              case '12':
                return <a-tag color = "pink" > 损毁 < /a-tag>
              case '13':
                return <a-tag color = "pink" > 故障 < /a-tag>
              case '14':
                return <a-tag color = "pink" > 装机出库 < /a-tag>
              case '15':
                return <a-tag color = "pink" > 撤机 < /a-tag>
              case '16':
                return <a-tag color = "pink" > 丢失 < /a-tag>
              case '17':
                return <a-tag color = "pink" > 返回第三方 < /a-tag>
              default:
                return text
            }
          },
          filters: [
            {text: '未使用', value: '10'},
            {text: '已使用', value: '11'},
            {text: '损毁', value: '12'},
            {text: '故障', value: '13'},
            {text: '装机出库', value: '14'},
            {text: '撤机', value: '15'},
            {text: '丢失', value: '16'},
            {text: '返回第三方', value: '17'},
          ],
          filterMultiple: false,
          filteredValue: filteredInfo.status || null,
          onFilter: (value, record) => record.status.includes(value)
        }, {
          title: '租赁起始日期',
          dataIndex: 'leaseStartDate',
          scopedSlots: {customRender: 'leaseStartDate'},
        }, {
          title: '租赁截止日期',
          dataIndex: 'leaseEndDate',
          scopedSlots: {customRender: 'leaseEndDate'},
        }, {
          title: '租赁费用(元/日)',
          dataIndex: 'deviceLeasePrice',
          scopedSlots: {customRender: 'deviceLeasePrice'},
        }, {
          title: '押金(元）',
          dataIndex: 'cashPledge',
          scopedSlots: {customRender: 'cashPledge'},
        }]
      },
      errorColumns() {
        return [{
          title: '行',
          dataIndex: 'row',
          customRender: (text, row, index) => {
            return `第 ${text + 1} 行`
          }
        }, {
          title: '列',
          dataIndex: 'cellIndex',
          customRender: (text, row, index) => {
            return `第 ${text + 1} 列`
          }
        }, {
          title: '列名',
          dataIndex: 'column'
        }, {
          title: '错误信息',
          dataIndex: 'errorMessage'
        }]
      },
      show: {
        get: function () {
          return this.importResultVisible
        },
        set: function () {
        }
      }
    },
    methods: {
      handleCancel() {
        this.$emit('close')
      }
    }
  }
</script>
<style lang="less">
  .import-result {
    .import-desc {
      margin-bottom: .5rem;

      a {
        font-weight: 600;
      }
    }
  }
</style>


